import { useState } from "react";
export default function App() {
    const [count, setCount] = useState(0); // 默认值
    // 第一个是状态值
    // 第二个是修改状态值的函数
    // const [m, n] = useState(0);
    // setCount 修改count的值，是一个函数
    const [list, setList] = useState([]);
    const [obj, setObj] = useState({});
    // 数组和对象数据修改不能直接修改原数组或原对象，必须先深拷贝再修改
    return (
        <div>
            <p>count: {count}</p>
            <ul>
                {list.map((item) => (
                    <li key={item}>{item}</li>
                ))}
            </ul>
            <p>随机数: {obj.random}</p>
            <button
                onClick={() => {
                    setCount(count + 1);
                }}>
                count + 1
            </button>
            <button
                onClick={() => {
                    const newList = [...list];
                    newList.push(Math.random().toFixed(2));
                    setList(newList);
                }}>
                修改列表
            </button>
            <button
                onClick={() => {
                    const newObj = { ...obj };
                    newObj.random = Math.random();
                    setObj(newObj);
                }}>
                修改对象
            </button>
        </div>
    );
}
